<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../../common/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../common/bootstrap/js/bootstrap.min.js"></script>

    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }

        div.mini {
            width:55px;
            height:55px;
            background-color:#aaa;
            font-size:12px;
        }

        div.hide {
            display:none;
        }

    </style>

    <script type="text/javascript">
        $(document).ready(function(){

            function animateIt(){
                $("#mover").slideToggle("slow", animateIt);
            }
            animateIt();


            $('#button01').click(function(){
                $('div:first').css('background','#bbffaa');
            });

            $('#button02').click(function(){
                $('div:last').css('background','#bbffaa');
            });

            $('#button03').click(function(){
                $('div:not(.one)').css('background','#bbffaa');
            });

            $('#button04').click(function(){
                $('div:even').css('background','#bbffaa');
            });

            $('#button05').click(function(){
                $('div:odd').css('background','#bbffaa');
            });

            $('#button06').click(function(){
                $('div:eq(3)').css('background','#bbffaa');
            });

            $('#button07').click(function(){
                $('div:gt(3)').css('background','#bbffaa');
            });

            $('#button08').click(function(){
                $('div:lt(3)').css('background','#bbffaa');
            });

            $('#button09').click(function(){
                $(':header').css('background','#bbffaa');
            });

            $('#button10').click(function(){
                $(':animated').css('background','#bbffaa');
            });



            $('#button11').click(function(){
                $('div:contains("di")').css('background','#bbffaa');
            });

            $('#button12').click(function(){
                $('div:empty').css('background','#bbffaa');
            });

            $('#button13').click(function(){
                $('div:has(.mini)').css('background','#bbffaa');
            });

            $('#button14').click(function(){
                $("div:parent").css('background','#bbffaa');
            });

            $('#button15').click(function(){
                $("div:visible").css('background','#bbffaa');
            });

            $('#button16').click(function(){
                $("div:hidden").show(3000);
            });
        });

    </script>
</head>
<body>
<div class="one" id="one">
    id为one，class为one的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="prev">
    prev，class为one的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two，class为one,title为test的div.
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为“none”的div</div>
<div class="hide">class为“hide”的div</div>
<div>
    包含input的type为“hidden”的div<input type="hidden" size="8">
</div>

<span id="mover">正在执行动画的span元素.</span>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<br/>
<button type="button" id="button01">改变第一个div元素的背景颜色</button>
<button type="button" id="button02">改变最后一个div元素的背景颜色</button>
<button type="button" id="button03">改变class不为one的div元素的背景色</button>
<button type="button" id="button04">改变索引值为偶数的div元素的背景颜色</button>
<button type="button" id="button05">改变索引值为奇数的div元素的背景颜色</button>
<button type="button" id="button06">改变索引值为3的div元素的背景颜色</button>
<button type="button" id="button07">改变索引值大于3的div元素的背景颜色</button>
<button type="button" id="button08">改变索引值小于3的div元素的背景颜色</button>
<button type="button" id="button09">改变所有的标题元素的背景颜色</button>
<button type="button" id="button10">改变正在执行动画元素的背景颜色</button>


<button type="button" id="button11">改变含有文本di的div元素的背景颜色</button>
<button type="button" id="button12">改变不含有元素（文本）的div元素的背景颜色</button>
<button type="button" id="button13">改变含class为mini元素的背景颜色</button>
<button type="button" id="button14">改变含有子元素包括文本元素的div元素的背景颜色</button>
<button type="button" id="button15">改变所有可见元素的背景颜色</button>
<button type="button" id="button16">显示隐藏的元素</button>
</body>
</html>